<template>
  <span @click="toggleStatus">
    <icon-sidebar-off v-if="status" />
    <icon-sidebar-on v-else />
  </span>
</template>

<script setup lang="ts">
import IconSidebarOn from "@/components/icons/IconSidebarOn.vue";
import IconSidebarOff from "@/components/icons/IconSidebarOff.vue";
import { useLocalStorage, useToggle } from "@vueuse/core";
import { ref, watch } from "vue";

// 使用 useLocalStorage hook 来创建名为 'my-data' 的 localStorage 变量
const statusLocalStorage = useLocalStorage<boolean>("sidebar_status", false);
// 侧边栏展开状态
const status = ref<boolean>(false);
// 获取侧边栏的展开状态、切换方法
const [value, toggleValue] = useToggle<boolean>(status.value);
// 切换状态
const toggleStatus = () => {
  toggleValue();
  status.value = value.value;
};
// 监控状态
watch(status, (newVal: boolean) => {
  // 实时保存状态
  statusLocalStorage.value = newVal;
});
</script>

<style scoped lang="scss"></style>
